<template>
	<view>
		<view class="head-nav">
			<view :class="navIndex==1?'activite':''" @click="checkedIndex(1)" style="margin-right: 51rpx;">待完成订单</view>
			<view :class="navIndex==2?'activite':''" @click="checkedIndex(2)">历史订单</view>
		</view>
		<view class="nav" v-if="navIndex == 1">
			<view class="navBar" v-for="(nav, i) in navList" :key="i">
				<view :class="{'active':isActive == i}" @click="checked(i)">
					{{nav.title}}
				</view>
			</view>
		</view>
		<view class="content" >
			<block v-for="(item, index) in orderList" :key="index">
				<view class="order">
					<view class="it1">
						<image :src="item.img"></image>
						<text style="margin-left: 20rpx;">{{item.username}}</text>
						<text style="margin-right: 20rpx;margin-left: auto;">{{item.status == 1 ? '待接单':(item.status==3?'待配送':(item.status==4?'配送中':(item.status==5?'已完成':(item.status==6?'已取消':'全部'))))}}</text>
					</view>
					<view class="it2">
						<text>下单时间：{{item.delivery_day}}</text>
					</view>
					<view class="line"></view>
					<scroll-view scroll-x="true" style="display: flex;">
						<view class="it3" v-for="goods in item.data.cart">
							
							<image :src="goods.productImg"></image>
							<view class="product-Info" >
								<text style="font-size: 24rpx;color: #1A1A1A;">{{goods.title}}</text>
								<view  v-for="pic in goods.options">
									<text style="font-size: 20rpx;color: #666666;">规格：{{pic.option_title}}</text>
									<text style="font-size: 20rpx;color: #1A1A1A;"> ￥{{pic.price*pic.num}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
					
					<view class="it4">
						<text>共{{item.num}}件 合计￥{{item.price}}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
	import {
		Storage
	} from "@/static/libs/utils";
	export default {
		data() {
			return {
				navIndex: 1,
				isActive: 0,
				navList: [{
						index: 0,
						title: '待付款'
					},
					{
						index: 1,
						title: '待发货'
					},
					{
						index: 2,
						title: '待收货/提货'
					},
					{
						index: 3,
						title: '已完成'
					}
				],
				orderList: [],
				token:''
			}
		},
		onLoad() {
			this.token = Storage.get('token');
			this.getOrderList()
		},
		methods: {
			checkedIndex(index) {
				this.navIndex = index
			},
			checked(index) {
				this.isActive = index
			},

			// 获取订单列表
			getOrderList() {
				this.$request.get(
						`/waimai_go/web/wmerchant.php?c=site&a=entry&ctrl=store&ac=order&op=takeout&do=web&m=we7_wmall&i=1&status=0&is_reserve=-1&is_pay=-1&pay_type=&order_channel=&is_remind=&keyword=&uid=&page=&token=${this.token}&isajax=1`
						)
					.then(res => {
						console.log(res.data.data);
						this.orderList = res.data.data
					})
			}

		}
	}
</script>
<style lang="scss">
	page {
		background: rgb(245, 245, 245);
	}

	.head-nav {
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
		flex-direction: row;
		padding-left: 30rpx;
		font-size: 34rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		background: #FFFFFF;
	}

	.activite {
		color: #1A1A1A;
	}

	.nav {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
		background: #FFFFFF;
	}

	.navBar {
		height: 80rpx;
		line-height: 80rpx;
	}

	.active {
		position: relative;
	}

	.active::after {
		content: '';
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 60rpx;
		height: 4rpx;
		background: #FEB140;
	}

	.order {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx;
		padding-top: 20rpx;

		.it1 {
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #1A1A1A;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.line {
			width: 690rpx;
			height: 1rpx;
			background-color: #E5E5E5;
			margin: 20rpx 0;
		}

		.it2 {
			font-size: 20rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #666666;
			margin-left: 20rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			line-height: 40rpx;
		}

		.it3 {
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.product-Info {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				margin-left: 20rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				line-height: 35rpx;
			}
		}

		.it4 {
			margin-left: 458rpx;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #1A1A1A;
			padding-bottom: 20rpx;
		}
	}
</style>
